/* 
    Created on : Oct 7, 2014, 9:00:37 AM
    Author     : DucTuan
    Document: UI
*/


.Menu_nav,
.UI_BarMenu{
    font-family: $base_fontb;
    text-transform: uppercase;
    position: absolute;
    top:0px;
    z-index:99999;
    width:100%;
    bottom: 0px;
    display:none;

    .Menu_nav_layout,
    .UI_BarMenu_layout{
        background: rgba(0,0,0,.4);
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        z-index: 999;
    }
    ul{
        z-index: 99999;
        position: relative;
        top:41px;
    }
    a{
        color: #fff;
        height: 40px;
        line-height: 40px;
        display: block;
        text-align: center;
        background: rgba(14, 26, 8, .85);
        margin-bottom: 1px;
    }
}

.Menu_nav-hover{
    background: #5A9636!important;
}

.UI_BarMenu{
    .UI_BarMenu_layout{
        background: rgba(255,255,255, .3);
    }
    ul{
        top: 40px;
        a{
            margin-bottom: 0px;
            border-bottom: 1px solid #666666;
            background: rgba(51,51,51,.9);
            font-family: $base_font;
        }
        a.hover{
            background: rgba(51,51,51,1);
        }
    }

}

.UI_BarMenu_button{
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 22px;
    width: 42px;
    height: 40px;
    text-align: center;
    padding-top: 7px;
    z-index: 999999;
    color: #333333;
}

.UI_BarMenu_button.hover,
.UI_BarMenu_button.active{
    background: rgba(51, 51, 51, 0.9);
    color: #fff;
}
@mixin list-effect($name,$duration,$delay){
    -webkit-animation-name:$name;
    -webkit-animation-duration: $duration;
    -webkit-animation-fill-mode: both;
    -webkit-animation-delay:$delay;

    animation-name:$name;
    animation-duration: $duration;
    animation-fill-mode: both;
    animation-delay:$delay;
}
.Menu_nav_show, .ListView{
    display: block!important;
    li:nth-child(1){
        @include list-effect(fadeInLeft,.4s,0s);
    }
    li:nth-child(2){
        @include list-effect(fadeInLeft,.4s,.1s);
    }
    li:nth-child(3){
        @include list-effect(fadeInLeft,.4s,.2s);
    }
    li:nth-child(4){
        @include list-effect(fadeInLeft,.4s,.3s);
    }
    li:nth-child(5){
        @include list-effect(fadeInLeft,.4s,.4s);
    }
    li:nth-child(6){
        @include list-effect(fadeInLeft,.4s,.5s);
    }
    li:nth-child(7){
        @include list-effect(fadeInLeft,.4s,.6s);
    }
    li:nth-child(8){
        @include list-effect(fadeInLeft,.4s,.7s);
    }
    li:nth-child(9){
        @include list-effect(fadeInLeft,.4s,.8s);
    }
    li:nth-child(10){
        @include list-effect(fadeInLeft,.4s,.9s);
    }
    li:nth-child(11){
        @include list-effect(fadeInLeft,.4s,1s);
    }

}
.Scroller{
    overflow-y: auto;
}
.Inner{
    position: relative;
    width: 100%;
    height: 100%;
}
.UI_Header{
    z-index: 9999;
    height: 52px;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    background: #fff url('../images/header-bottom.jpg') no-repeat left bottom;
    background-size:100% 3px;
    .Inner{
        @include image('header-icon.png');
        background-position: left center;
        background-size: 17px 18px;
    }
    .Header_btn{
        font-size: 24px;
        width: 50px;
        height: 100%;
        text-align: center;
        position: absolute;
        top: 0px;
        color: #009600;
        .fa{
            margin-top: 13px;
        }
    }
    .Header_btn.hover,.Header_btn.active{
        background: #000096;
        color:#fff;
    }
    .Right_1{
        right: 0px;
    }
    .Left_1{
        left: 0px;
    }

    .Header_text{
        font-size: 13px;
        color: #666;
        text-transform: uppercase;
        display: block;
        position: absolute;
        left: 0px;
        right: 50px;
        top: 0px;
        bottom: 3px;
        text-align: left;
        line-height: 52px;
        font-family: $base_fontb;
        padding-left: 15px;

        img{
            height: 23px;
            margin-right: 3px;
        }
        .image{
            width: 70px;
            height: 100%;
            background-size: 100% !important;
            float: left;
            margin-top: 0px;
            background-position: center center!important;
            margin-right: 5px;
        }


    }
    select{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 106px;
        background: none;
        height: 100%;
        border: none;
        opacity: 0;
    }
    .Header_text.hover,.Header_text.active{
        opacity: .3;
    }
}
#page_indexhome{
    .UI_Header{
        .Header_text{
            .image{
                width: 100px;
            }
        }
    }
}
.UI_Body{
    position: absolute;
    top: 52px;
    bottom: 30px;
    left: 0px;
    right: 0px;
    z-index: 99;
    background: #fff;
    /*    background-size: cover!important;*/
    background-size: 100% 100%!important;
    background-position: top center!important;
    background-repeat: no-repeat!important;
}
.UI_Body.Popup{
    top: 0px;
}
.Button_list{
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 0px;
    margin: auto;
    width: 299px;
    a{
        font-size: 12px;
        color: #333333;
        font-family: $base_fontb;
        text-transform: uppercase;
        @include bg_gradient2(#fff,#dfdfdf);
        width: 94px;
        height: 37px;
        border-radius: 5px;
        display: inline-block;
        line-height: 37px;
        text-align: center;
        box-shadow: 0px 0px 5px rgba(0,0,0,.5) inset;
        margin-right: 5px;
    }
    a:last-child{
        margin-right:0px;
    }
    a#Point{
        @include bg_gradient2(#bc1c1a,#b11a16);
        color: #fff;
        span{
            @include image('icon-point.png');
            background-size: 16px 16px;
            display: inline-block;
            height: 16px;
            width: 16px;
            margin-bottom: -5px;
            margin-right: 2px;
        }
        .score{

        }
    }

    .a-hover{
        background:#01A5E1;
        color:#fff;
    }
}
/*
 *@Infobar
 */
#UI_InfoBar{
    width: 270px;
    position: absolute;
    top: 0px;
    @include bg_image('bg_user.jpg');
    background-size: cover!important;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    opacity:0;

    .UI_BarBody{
        //@include transition(.6s);
        //@include translate3d(0px,100%,0px);
        opacity: 0;
        overflow-y: auto;
        position: absolute;
        top: 40px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        -webkit-overflow-scrolling: touch;
        -overflow-scrolling: touch;
    }

    .UI_BarBody_Active{
        opacity: 1;
        @include transition(.6s);
        //@include translate3d(0px,0%,0px);
    }
}

/*
 *@Waiting
 */
@mixin Wait_ios(){
    -webkit-mask-image: url(../images/oofy_loading.png);
    -webkit-mask-size: 100% 100%;

    overflow: hidden;
    position: absolute;
    display: inline-block;
    height: 20px;
    width: 20px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    left: 0px;
    right: 0px;
    z-index:999999;
    opacity:1;
    @include transition(.8s);

    div{
        background-color: rgba(0,0,0,1);
        height: 110%;
        -webkit-mask-image: url(../images/oofy_loading_inside.png);
        -webkit-mask-position: center center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        position: relative;
        top: -5%;
        width: 110%;
        left: -5%;

        -webkit-transform:rotate(0deg) translateZ(0);
        -webkit-transition-duration:0ms;

        -webkit-animation-name:loading;
        -webkit-animation-duration:.9s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-timing-function:linear;
    }
}
@mixin Wait_snip(){
    position: absolute;
    display: inline-block;
    height: 20px;
    width: 20px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    left: 0px;
    right: 0px;
    z-index:99;

    color: #fff;
    font-size: 21px;

    div{
        -webkit-animation-name:loading;
        -webkit-animation-duration:1s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-timing-function: liner;
        animation-name:loading;
        animation-duration:1s;
        animation-iteration-count:infinite;
        animation-timing-function: liner;
        height: 20px;
        width: 20px;
        opacity:.7!important;
    }

}
.Waiting {
    @include Wait_snip();
}


.Waiting_slideup{
    //@include translate3d(0px,-230px,0px);
    @include transition(.8s);
    opacity: 0;
}

.Wait{
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;

    .Wait_inner{
        width: 100%;
        height: 100%;
        position: relative;
    }
}
.Wait.slideup{
    //@include translate3d(0px,-230px,0px);
    @include transition(.8s);
    opacity: 0;
}

/*
 *@UI_Popup
 */
.UI_Popup{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    margin: auto;
    /*@include bg_gradient2(#fff,#efeeee);*/
    @include bg_image('bg.jpg');
    /*background: #fff;*/
    background-size: cover !important;
    overflow: hidden;
    z-index: 99990;
    display: none;
}
.UI_Popup_open{
    display: block;
}
.UI_Popup_close{
    -webkit-animation: zoomOut .5s linear;
    animation: zoomOut .5s linear;
}
.UI_Popup .UI_ContentBody{
    position: absolute;
    top: 52px;
    left: 0px;
    right: 0px;
    bottom: 0px
}


.UI_Notification{
    position: absolute;
    top: 52px;
    left: 0px;
    color: #fff;
    z-index: 99999;
    font-size: 14px;
    font-family: 'Roboto';
    border-radius: 0px;
    right: 0px;
    bottom: 0px;
    .Wrapper{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .Layout{
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background: rgba(0,0,0,.7);
    }

    .Notification{
        top: 18px;
        left: 15px;
        background: #fff;
        position: absolute;
        color: #19207E;
        @include border-radius(5px);
    }
    .Inner{
        position: relative;
        padding: 10px;
    }
    .Inner:before{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        border: 9px solid transparent;
        border-bottom: 34px solid white;
        top: -35px;
        -webkit-transform: rotate(-18deg);
        transform: rotate(-18deg);
        left: -2px;
    }
}

.Body{
    width: 100%;
    height: 100%;
}

.UI_PopupPanel{
    position: absolute;
    top: 52px;
    left: 0px;
    right: 0px;
    bottom: 30px;
    background: rgba(241, 241, 241, 0.95);
    z-index: 99991;
    display:none;
    .Scroller{
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        -webkit-overflow-scrolling: touch;
        -overflow-scrolling: touch;
        .Scroll_Inner{
            position: relative;
        }
    }

}


.UI_TextPanel{
    position: absolute;
    top: 52px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: #fff;
    z-index: 99991;
    display:none;
    //@include placeholder-color(#bdc1c9);

    textarea{
        background: #fff;
        width: 100%;
        height: 80px;
        padding: 10px;
        border: 1px solid #EFEFEF;
        margin-bottom: 7px;
        font-size: 16px;
    }
    .clearText{
        width: 17px;
        height: 17px;
        @include bg_image('../images/close1.png');
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 999;
        display: none;
    }
    .center{
        padding: 11px 11px;
        position: relative;
    }
    button{
        background: #000096;
        font-size: 18px;
        padding: 13px 20px;
        border-radius: 0px;
        display: block;
        margin-top: 0px;
        border: none;
        color: #fff;
        width: 48.6%;
        float:left;
    }
    button.hover,button.active{
        background: #00ADED;
    }
    button:last-child{
        float:right;
    }
}

.UI_Footer{
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 32px;
    background: #fff;
    font-size: 12px;
    z-index:99999;
    box-shadow:0px 0px 5px rgba(0,0,0,.2);
    .Mute{
        width: 24px;
        height: 24px;
        @include image('mute.png');
        background-color: #5C5C5C;
        background-position: center center;
        margin: 4px;
        display: block;
        float: left;
        background-size: 95%;
        border-radius: 3px;
        position: relative;
    }
    .Mute.stop:before{
        content: "";
        background: #F9F9F9;
        height: 25px;
        width: 2px;
        display: block;
        position: absolute;
        @include rotate(130deg);
        right: 11px;
        top: 0px;
    }
    p{
        float: right;
        padding: 0px 8px;
        line-height: 31px;
        img{
            width: 70px;
        }
    }
}

.UI_Footer:after{
    @include clearfix();
}

.Error{
    background: #e9e9e9;
    div{
        width: 150px;
        height: 150px!important;
        text-align: center;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
        color: #aaa;
        span{
            display: inline-block;
            font-size: 35px;

        }
        span.loading{
            -webkit-animation-name:loading;
            -webkit-animation-duration:1s;
            -webkit-animation-iteration-count:infinite;
            -webkit-animation-timing-function: liner;
            animation-name:loading;
            animation-duration:1s;
            animation-iteration-count:infinite;
            animation-timing-function: liner;
        }
        p{
            font-size: 14px;
            font-family: 'Roboto';
            em{
                font-size: 18px;
                display: block;
                font-style: normal;
                margin-top: 20px;
                color: #797979;
            }
        }
    }
    div.hover{
        opacity: .6;
    }
}